<template>
    <div class="xx2">
        <div class="xx2_left">
            <div class="xx2_left_left">
                <div class="xx2_left_left_top">
                    <span class="tzgg">通知公告</span>
                    <span class="gd">更多></span>
                </div>
                <ul class="dynews">
                    <li v-for="i in xwList">
                        <span><a href="#">{{i.nr}}</a></span>
                        <span>{{i.author}}</span>
                    </li>
                </ul>
            </div>

            <div class="xx2_left_right">
                <div class="xx2_left_left_top">
                    <span class="tzgg">推荐文章</span>
                    <span class="gd">更多></span>
                </div>
                <ul class="dynews">
                    <li v-for="i in xwList">
                        <span><a href="#">{{i.nr}}</a></span>
                        <span>{{i.author}}</span>
                    </li>
                </ul>
            </div>

            <div class="xx2_left_bottom">
                <div class="xx2_left_bottom_top">
                    <span class="tzgg">专家展示</span>
                    <span class="gd">更多 ></span>
                </div>
                <div class="xx2_left_bottom_bottom">
                    <!--<div  class="zjzs">
                        <img src="../../assets/images/expertDetail.png">
                        <span>专家</span>
                        <span>山东医学情报协会</span>
                    </div>
                    <div  class="zjzs">
                        <img src="../../assets/images/expertDetail.png">
                        <span>专家</span>
                        <span>山东医学情报协会</span>
                    </div>
                    <div  class="zjzs">
                        <img src="../../assets/images/expertDetail.png">
                        <span>专家</span>
                        <span>山东医学情报协会</span>
                    </div>
                    <div  class="zjzs">
                        <img src="../../assets/images/expertDetail.png">
                        <span>专家</span>
                        <span>山东医学情报协会</span>
                    </div>
                    <div  class="zjzs">
                        <img src="../../assets/images/expertDetail.png">
                        <span>专家</span>
                        <span>山东医学情报协会</span>
                    </div>-->
                    <expert-swiper></expert-swiper>
                </div>
            </div>
        </div>

        <div class="xx2_right">
            <div class="xx2_right_top">
                <span class="tzgg">精彩评论</span>
                <span class="gd">更多 ></span>
            </div>

            <ul class="newsList">
                <li v-for="comments in commentsList">
                    <p>{{ comments.title }}</p>
                    <a :href="comments.url">{{ comments.newSource }}</a>
                </li>
                <p class="last"><router-link to="/index/tzgg" tag="a">查看更多精彩评论</router-link></p>
            </ul>

        </div>
    </div>
</template>

<script>
    import expertSwiper from "./expertSwiper";
    export default {
        name: "bottom_xx2",
        components:{
            expertSwiper,
        },
        data(){
            return{
                xwList: [{
                    nr: '构接共适电干际区全门回多物确却厂',
                    author: '作者：张晓波'
                }, {
                    nr: '目识压年间图影这被白且周向选重重决叫求。',
                    author: '作者：张晓波'
                }, {
                    nr: '分我青王米许适代北法光她习矿究对统好律更。',
                    author: '作者：张晓波'
                }, {
                    nr: '资记行思放系文石七又质第感时当建月题。',
                    author: '作者：张晓波'
                }, {
                    nr: '条程口行响情连别率律用果者具入。',
                    author: '作者：张晓波'
                }, {
                    nr: '包叫改九派增识消学中着见场精共张边即北明。',
                    author: '作者：张晓波'
                }, {
                    nr: '包叫改九派增识消学中着见场精共张边即北明。',
                    author: '作者：张晓波'
                }, {
                    nr: '包叫改九派增识消学中着见场精共张边即北明。',
                    author: '作者：张晓波'
                }],
                commentsList:[{
                    id:1,
                    url:'http://www.baidu.com',
                    title: '早该如此了，不知道多少贪官老虎还在逍遥法外',
                    newSource:'原文章：人民日报聚焦地方政治生态'
                },
                    {
                        id:2,
                        url:'http://www.baidu.com',
                        title: '保持定力，我党威武',
                        newSource:'原文章：凭风借好力，转正正当时'
                    },{
                        id:3,
                        url:'http://www.baidu.com',
                        title: '老百姓终于看到希望了，希望国家能真正重视起来',
                        newSource:'原文章：人民日报聚焦地方政治生态'
                    },{
                        id:4,
                        url:'http://www.baidu.com',
                        title: '早该如此了，不知道多少贪官老虎还在逍遥法外',
                        newSource:'原文章：人民日报聚焦地方政治生态'
                    },
                    {
                        id:5,
                        url:'http://www.baidu.com',
                        title: '保持定力，我党威武',
                        newSource:'原文章：凭风借好力，转正正当时'
                    }],
            }
        }
    }
</script>

<style scoped lang="less">
    .xx2 {
        width: 100%;
        height: 600px;
        display: flex;

        justify-content: space-between;

        .xx2_left {
            width: 830px;
            height: 600px;


        }

        .xx2_right {

            width: 320px;
            height: 600px;

         }

    }

    .xx2_left_left{

        float: left;
        width: 400px;
        height: 380px;
    }
    .xx2_left_right{

        float: right;
        width: 400px;
        height: 380px;
    }

    .xx2_left_left_top{
        width: 100%;
        height: 40px;
        background-color: #99a9bf;

    }
    .tzgg{
        font-size: 18px;
        color: #1a66b3;
        float: left;
        margin-left: 20px;
        line-height: 40px;
    }
    .gd{
        font-size: 18px;
        color: #707884;
        float: right;
        margin-right: 10px;
        line-height: 40px;
    }
    .dynews {
        width: 100%;

    }
    .dynews:after {
        content: '';
        display: block;
        clear: both;
    }
    .dynews li {

        line-height: 40px;
        height: 40px;
        background-image: url(../../assets/images/dian.png);
        background-repeat: no-repeat;
        background-position: 0 center;
        padding-left: 10px;

        span:first-child {
            float: left;

        }
        a{
            color: #000000;
            display: block;
            overflow:hidden; /*溢出的部分隐藏*/
            white-space: nowrap; /*文本不换行*/
            text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/
            width:250px;
        }

        span:last-child {
            float: right;
            margin-right: 10px;
            color: #bdc3cd;

        }

    }

    .xx2_left_bottom{
        width: 100%;
        height: 220px;
        clear:  both;
        /*float:left;*/
        .xx2_left_bottom_top{
            width: 100%;
            height:40px;
            border-bottom: #99a9bf solid 3px;
        }
        .xx2_left_bottom_bottom{
            /*width: 780px;*/
            height: 180px;


        }
    }
    .xx2_right_top{
        width: 100%;
        height: 40px;
        background-color: #99a9bf;
    }



    //第二行最右侧的消息列表样式
    .newsList li:first-child{
        margin-top: 10px;
    }
    .newsList li{
        float: left;
        width: 245px;
        padding: 0px 10px;
        text-align: left;
        border-bottom: 1px solid #efefef;
        P{
            font-size: 13px;
            padding-top: 15px;
            color: #333333;
        }
    }
    .newsList li:hover a{
        color: #037EDB;
    }
    .newsList li a{
        display: inline-block;
        padding: 16px 0;
        color: #666666;
    }
    .newsList .last a{
        display: inline-block;
        float: left;
        padding: 20px 0;
        color: #666666;
        width:245px !important;
        white-space:nowrap;
        overflow:hidden;
        -o-text-overflow:ellipsis;
        text-overflow:ellipsis;
    }




    .zjzs{
        float: left;
        width: 150px;
        height: 170px;
        margin-left: 6px;
        img{
            width: 100px;
            height: 100px;
        }
        span{
            display: block;
        }
    }



</style>